import 'package:boss/color_constant.dart';
import 'package:boss/textStyle/text_style.dart';
import 'package:boss/ui/page/miniProgram/miniProgramQrDetail/mini_program_qr_detail_page.dart';
import 'package:boss/ui/widget/button/fixed_bottom_btn.dart';
import 'package:boss/ui/widget/center_title_app_bar.dart';
import 'package:boss/ui/widget/form/select_form_field.dart';
import 'package:boss/ui/widget/shadow_radius_card.dart';
import 'package:flutter/material.dart';
import 'package:hi_common/hi_common.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:router/annotation.dart';

@RouterConfig(MiniProgramQrConfigPage.pageName)
class MiniProgramQrConfigPage extends StatefulWidget {
  static const pageName = '/MiniProgramQrConfigPage';

  @override
  _MiniProgramQrConfigPageState createState() => _MiniProgramQrConfigPageState();
}

class _MiniProgramQrConfigPageState extends BaseState<MiniProgramQrConfigPage> {
  _MiniProgramQrConfigPageState() : super(MiniProgramQrConfigPage.pageName);

  final styleList = [
    SelectItem(title: '仅展示二维码', value: 0),
    SelectItem(title: '二维码、座位号', value: 1),
  ];

  int style = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CenterTitleAppBar(title: '定制二维码'),
      body: Column(
        children: [
          Expanded(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 30.w),
              child: Column(
                children: [
                  SelectFormField<int>(
                    title: '选择展示内容',
                    items: styleList,
                    value: style,
                    onChanged: styleChanged,
                  ),
                  Container(
                    height: 90.w,
                    alignment: Alignment.centerLeft,
                    child: Text('预览效果', style: TextStyleConstant().normal_1_28),
                  ),
                  ShadowRadiusCard(
                    width: 386.w,
                    child: Container(
                      decoration: BoxDecoration(
                        color: const Color(0xFFFCCA00),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      padding: EdgeInsets.symmetric(vertical: 30.w, horizontal: 30.w),
                      child: Column(
                        children: [
                          Text('请扫码点餐', style: TextStyleConstant().normal_1_44.copyWith(fontWeight: FontWeight.bold)),
                          Container(
                            width: double.infinity,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(20),
                            ),
                            margin: EdgeInsets.only(top: 10.w),
                            padding: EdgeInsets.symmetric(vertical: 20.w),
                            child: Column(
                              children: [
                                if (style == 1)
                                RichText(
                                  text: TextSpan(
                                    text: '桌台：',
                                    style: TextStyleConstant().normal_1_32,
                                    children: [
                                      TextSpan(text: '001', style: TextStyleConstant().normal_1_44)
                                    ]
                                  ),
                                ),
                                QrImage(
                                  data: 'hello world',
                                  size: 250.w,
                                  backgroundColor: Colors.white,
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          FixedBottomBtn(title: '确定样式，下一步', onTap: nextPage),
        ],
      ),
    );
  }

  void nextPage() {
    Navigator.pushNamed(context, MiniProgramQrDetailPage.pageName);
  }

  void styleChanged(int value) {
    setState(() {
      style = value;
    });
  }
}
